<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-input type="text" placeholder="输入内容" size="small" v-model="keywords" />
      </el-form-item>
      <el-form-item>
        <el-select v-model="levelId" placeholder="请选择" size="small">
          <el-option
            v-for="item in level"
            :key="item.name"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- 搜索按钮 -->
      <el-form-item>
        <el-button type="info" size="small" @click="getUserList">搜索</el-button>
      </el-form-item>
      <!-- 高级搜索 -->
      <el-form-item>
        <el-button type="primary" size="small">高级搜索</el-button>
      </el-form-item>
      <!-- 添加按钮 -->
      <el-form-item>
        <el-button type="success" size="small" @click="usersForm = true"
          >添加用户</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 添加用户会员的对话框 -->
    <el-dialog title="添加用户" :visible.sync="usersForm">
      <el-form :model="userlist">
        <el-form-item label="用户名" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.username"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" type="password" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.nickname"
            autocomplete="off"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="添加头像" :label-width="'80px'">
          <el-button
            size="small"
            icon="el-icon-plus"
            @click="addImgform = true"
            v-if="userlist.avatar == ''"
          ></el-button>
          <el-image :src="userlist.avatar" v-else />
        </el-form-item>
        <el-form-item label="会员等级" :label-width="'80px'" size="small">
          <el-select v-model="userlist.user_level_id" placeholder="请选择" size="small">
            <el-option
              v-for="item in level"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.phone"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="'80px'">
          <el-radio v-model="userlist.status" label="1" border size="small"
            >启用</el-radio
          >
          <el-radio v-model="userlist.status" label="0" border size="small"
            >禁用</el-radio
          >
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="usersForm = false">取 消</el-button>
        <el-button type="primary" @click="addusers">添加</el-button>
      </div>
    </el-dialog>
    <!-- 用户列表数据 -->
    <el-table border style="width: 100%" :data="list">
      <el-table-column label="会员">
        <template v-slot="scope">
          <img :src="scope.row.avatar" alt="" />
          <p>
            {{ scope.row.username }}<span>用户名ID：{{ scope.row.id }}</span>
          </p>
        </template>
      </el-table-column>
      <el-table-column label="会员等级" prop="user_level.name"> </el-table-column>
      <el-table-column label="登录注册">
        <template v-slot="scope">
          <div>
            登录时间：{{ scope.row.create_time }}
            最后登录时间：
          </div>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template v-slot="scope">
          <div>
            <el-button type="warning" v-if="scope.row.status == 0">禁用</el-button>
            <el-button type="success" v-else>启用</el-button>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="scope">
          <el-button @click="edituser(scope.row)">修改</el-button>
          <el-button @click="deluser(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      @size-change="sizeChange"
      @current-change="pageChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="limit"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 添加头像组件 -->
    <setImg :addImgform="addImgform" @img="img"></setImg>
    <!-- 修改编辑 -->
    <el-dialog title="编辑" :visible.sync="editForm" width="60%">
      <el-form :model="userlist">
        <el-form-item label="用户名" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.username"
            autocomplete="off"
            placeholder="请输入用户名"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" type="password" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.password"
            autocomplete="off"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.nickname"
            autocomplete="off"
            placeholder="请输入昵称"
          ></el-input>
        </el-form-item>
        <el-form-item label="添加头像" :label-width="'80px'">
          <el-button
            size="small"
            icon="el-icon-plus"
            @click="addImgform = true"
            v-if="userlist.avatar == ''"
          ></el-button>
          <el-image :src="userlist.avatar" v-else />
        </el-form-item>
        <el-form-item label="会员等级" :label-width="'80px'" size="small">
          <el-select v-model="userlist.user_level_id" placeholder="请选择" size="small">
            <el-option
              v-for="item in level"
              :key="item.name"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="手机号" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.phone"
            autocomplete="off"
            placeholder="请输入手机号"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="'80px'" size="small">
          <el-input
            v-model="userlist.email"
            autocomplete="off"
            placeholder="请输入邮箱"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否启用" :label-width="'80px'">
          <el-radio v-model="userlist.status" label="1" border size="small"
            >启用</el-radio
          >
          <el-radio v-model="userlist.status" label="0" border size="small"
            >禁用</el-radio
          >
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editForm = false">取 消</el-button>
        <el-button type="primary" @click="edit">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 
    <el-dialog :visible.sync="addImgform">
      侧边栏
      <div class="box">
        <el-aside width="200px">
        <ul>
          <li v-for="item in asidelist" :key="item.id" @click="getid(item.id)">
            <span>{{ item.name }}</span>
            <el-dropdown>
              {{ item.images_count }}
            </el-dropdown>
          </li>
        </ul>
      </el-aside>
       图片列表 -->
    <!-- <el-row>
        <el-col :span="4" v-for="(o, index) in pics" :key="index">
          <el-card :body-style="{ padding: '0px' }">
            <el-image
              :src="o.url"
              style="width: 100%; height: 150px"
              @click="getimg(o.url)"
            />
            <span>{{ o.name }}</span>
          </el-card>
        </el-col>
      </el-row>
      </div> -->
    <!-- </el-dialog>  -->
  </div>
</template>
<script>
import setImg from "../common/setImg";
export default {
  components: { setImg },
  data() {
    return {
      list: [], //会员列表
      level: [],
      asidelist: [],
      keywords: "", //关键字
      levelId: 0,
      page: 1, //当前页
      limit: 10, //每页显示数据
      total: 0, //所有数据,总条数
      // 添加用户
      usersForm: false,
      userlist: {
        username: "",
        password: "",
        nickname: "",
        avatar: "",
        user_level_id: "",
        phone: "",
        email: "",
        status: "",
      },
      addImgform: false, //添加头像
      pics: [],
      order: "",
      keyword: "",
      id: "",
      editForm: false, //修改弹框
      cid:'',
    };
  },
  created() {},
  mounted() {
    this.getUserList();
    this.getaside();
  },
  methods: {
    img(url) {
      // console.log(123)
      this.addImgform = false;
      this.userlist.avatar = url;
    },
    // 获取用户的列表数据
    getUserList() {
      // 获取接口数据
      this.$axios
        .get(
          `/admin/user/${this.page}?limit=${this.limit}&keyword=${this.keywords}&user_level_id=${this.levelId}`
        )
        .then((res) => {
          this.list = res.data.list;
          this.total = res.data.totalCount;
          this.level = res.data.user_level;
          this.levelId = res.data.user_level.id;
          // console.log(this.list);
          // console.log(res.data);
        })
        .catch((error) => {
          // console.log(error.response.data);
          // this.$message.error.response.data.msg;
        });
    },
    sizeChange(size) {
      // 设置每页显示条数
      // console.log(size)
      this.limit = size;
      this.getUserList();
    },
    pageChange(page) {
      //点击的当前页
      // console.log(page)
      this.page = page;
      this.getUserList();
    },
    // 点击切换侧边栏
    getid(id) {
      console.log(id);
      this.id = id;
      this.getImage();
    },
    // 侧边栏数据
    getaside() {
      this.$axios.get(`/admin/imageclass/${this.page}?limit=`).then((res) => {
        // console.log(res);
        this.asidelist = res.data.list;
        this.id = res.data.list[0].id;
        this.getImage();
        // console.log(this.id);
      });
    },
    getImage() {
      this.$axios
        .get(
          `/admin/imageclass/${this.id}/image/${this.page}?limit=${this.limit}&order=${this.order}&keyword=${this.keyword}`
        )
        .then((res) => {
          // console.log(res);
          this.pics = res.data.list;
          console.log(this.pics);
        });
    },
    // 头像显示
    getimg(img) {
      this.userlist.avatar = img;
      this.addImgform = false;
    },
    // 添加会员
    addusers() {
      this.$axios
        .post("/admin/user", this.userlist)
        .then((res) => {
          if (res.msg == "ok") {
            this.$message.success("添加成功");
            this.getUserList();
            this.usersForm = false;
          }
        })
        .catch((error) => {
          console.log(error.response.data);
        });
    },
    // 修改
    edituser(info) {
      this.editForm = true;
      this.userlist = info;
      this.cid = info.id;
    },
    // 确定修改
    edit(){
      this.$axios.post(`/admin/user/${this.cid}`,this.userlist).then((res)=>{
        // console.log(res)
        if(res.msg == 'ok'){
          this.$message.success("修改成功");
          this.editForm = false;
          this.getUserList();
        }
      })
    },
    // 删除会员
    deluser(id){
      // alert(id)
      this.$axios.post(`/admin/user/${id}/delete`).then((res)=>{
       if(res.msg == 'ok'){
          this.$message.success("删除成功");
          this.getUserList();
        }
      })
    }
  },
  computed: {},
};
</script>

<style scoped lang="scss">
img {
  width: 50px;
  height: 50px;
}
.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  ul {
    width: 100%;
    padding: 0 10px;
    overflow: auto;
    li {
      width: 100%;
      height: 50px;
      line-height: 50px;
      border-bottom: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      cursor: pointer;
    }
  }
}
.box {
  display: flex;
}
.el-dialog {
  display: flex;
}
.el-image {
  width: 50px;
  height: 50px;
}
</style>
